每日一句來源：Daily English

No spring nor summer beauty hath such grace, as I have seen in one autumnal face. --無論是春天的俏，還是夏天的美，都沒有秋天的這份優雅。(John Donne)

昨天我們了解了基本的PWA的方式，但是當使用著的檔案cache了之後我們該如何更新？總不能叫使用者清除cache來更新吧，所以Angular有提供更新的方法。我們來實做看看

我們可以根據官方文件知道可以透過SwUpdate來操作更新檔案，以下實作

export class AppComponent {

  private hasNew = false;
  
  constructor(
    private _auth: AuthService,
    // 這裡注入
    updates: SwUpdate,
    private _alc: AlertConfirmService) {
    // 我們這裡可以自己標記版本
    console.log('App working! 1.2.1');

    // 當有可用更新時
    if (_swUpdate.isEnabled) {
      // 如果沒有更新他會馬上進 then，如果有，他會進下面的監聽，當下載完成的時候才會進then
      _swUpdate.checkForUpdate().then(e => {
        console.log('版本檢查完畢!');
        this.hasNew = true;
      });
      _swUpdate.available.pipe(
          takeWhile(() => this.hasNew) // 當檢查完畢利用takeWhile來完成監聽
        ).subscribe(event => {
        console.log('current version is', event.current);
        console.log('available version is', event.available);
        this._alc.alert('新版本應用已更新！')
          .ok(() => {
            _swUpdate.activateUpdate()
              .then(() => {
                document.location.reload();
              });
          });
      });
    }
}

就這樣~!我們就能當我們的APP有更新的時候，我們可以讓使用者更新檔案!

本日小節

今天我們為PWA加入更新的功能，讓使用者能透過SwUpdate來更新檔案，可以說Angular想得很周到啊!連這些部分都有想到，真的覺得未來在實作上真的是越來越方便了。